import { useComponentState } from '@/composables/useComponentState';
import { useTableResize } from '@/composables/useTableResize';

// 生成配置项
import { useProxy } from '@/composables/useTable/useProxy.js';
import { useColumns } from '@/composables/useTable/useColumns.js';
import { useForm } from '@/composables/useTable/useForm.js';
import { useToolbar } from '@/composables/useTable/useToolbar.js';
import { useEvents } from '@/composables/useTable/useEvents.js';


// 业务配置
import { useButtons, useActions } from './useActions.js';
import {
  getFieldColumns,
  getActionButtons,
  getFormData,
  getFormItems,
} from './useConfigs.js';

export const useTable = (options) => {
  const {
    API, // 后端API
    tableId, // 表格ID
    customConfig = {}, // 自定义配置
  } = options;

  // 表格引用
  const gridRef = ref(); // vxe-grid 组件实例
  const gridOptions = ref({}); // vxe-grid 配置
  const gridEvents = ref({}); // vxe-grid 事件

  // 附属组件引用和状态
    const addRef = ref(); // 新增
  const updateRef = ref(); // 修改
  const detailRef = ref(); // 详情
  const settingRef = ref(); // 设置


  // 公共变量
  const selectOption = ref({}); // 选择框字典数据
  const loading = ref(false); // 表格加载状态
  const showSearch = ref(true); // 是否显示搜索表单
  const selectType = ref('checkbox'); // 选择框类型
  const {
    isLayoutDisabled, // 布局禁用状态
    isSelectionMode, // 弹窗或者跳转组件的选择模式
    isCheckboxMode, // 多选模式
  } = useComponentState();
  const {
    tableHeight, // 表格高度
    formItemSpan, // 表单项栅格
  } = useTableResize(isLayoutDisabled);

  // 其他
  const selectedCount = ref(0); // 选中的行数
  const selectedRows = ref([]); // 选中的行
  const currentRow = computed(() => selectedRows.value[0]); // 当前行数据

  /**
   * 表格配置
   */
  // 表格代理配置
  const { proxyConfig } = useProxy({
    proxyApi: API.index,
    gridRef,
    page: true,
    selectOption,
  });
  // 方法
  const actions = useActions({ API, gridRef, addRef,updateRef,detailRef,settingRef, }); 
  // 按钮
  const buttons = useButtons({ selectedCount, currentRow }); 
  // 操作栏按钮
  const actionButtons = getActionButtons({ actions });
  // 搜索表单数据
  const formData = getFormData(); 
  // 表格字段
  const fieldColumns = computed(() => {
    return getFieldColumns(selectOption);
  }); 
  // 搜索表单项
  const formItems = computed(() => {
    return getFormItems(selectOption);
  }); 
  // 表格列配置
  const { columns } = useColumns({
    fieldColumns,
    actionButtons,
    isSelectionMode,
    isCheckboxMode,
    selectType,
  });
  // 表格搜索表单配置
  const { formConfig } = useForm({
    formData,
    formItems,
    showSearch,
    formItemSpan,
  });
  // 表格工具栏配置
  const toolbarConfig = useToolbar({
    buttons,
    showSearch,
    isSelectionMode,
    toolsAuth: {
      hasTree: false,
      print: false,
      export: false,
      import: false,
    },
  });
 
  // 获取表格配置
  const gridConfig = computed(() => {
    return {
      id: tableId,
      loading: loading.value,
      height: tableHeight,
      border: true,
      keepSource: false,
      columns,
      formConfig,
      toolbarConfig,
      proxyConfig: proxyConfig.value,
      rowConfig: {
        trigger: 'row',
        useKey: true,
        keyField: 'id',
        isHover: true,
        isCurrent: true,
        drag: true,
      },
      columnConfig: {
        resizable: true,
      },
      resizableConfig: {
        dragMode: 'fixed',
        isDblclickAutoWidth: true,
        minWidth: 60,
      },
      customConfig: {
        storage: true,
      },
      rowDragConfig: {
        isCrossDrag: true,
        isToChildDrag: true,
      },
      checkboxConfig: {
        trigger: 'row',
      },
      radioConfig: {
        trigger: 'row',
      },
      editConfig: {
        trigger: 'dblclick',
        mode: 'cell',
        showStatus: false,
      },
      filterConfig: {
        remote: true,
      },
      sortConfig: {
        remote: true,
      }, 
      // 合并自定义配置
      ...customConfig,
    };
  });
  gridOptions.value = gridConfig.value;

  /**
   * 事件配置
   */
  // 表格事件配置
  const { events } = useEvents({
    gridRef,
    API,
    actions,
    selectedRows,
    selectedCount,
    showSearch,
  });
  gridEvents.value = events;

  return {
    // 表格引用和配置
    gridRef,
    gridOptions,
    gridEvents,
    // 附属组件的引用
    addRef,
    updateRef,
    detailRef,
    settingRef,

    // 选择组件选项
    selectOption,
  };
};
